<!--
 - Author : wang885298.
 - Date   : 2019/4/4.
 - File   : msg.共用弹框组件
 -->

<template>
  <div class="msgWrap" v-dragable="dragable" :style="{width:labelWidth,position:pos}">
    <div class="msgWrap-close"  @click="clickTest()">
      <div class="msgWrap-close-img">
        <img src="../assets/images/close.png" alt="">
      </div>
    </div>
    <div class="msgWrap-title">
      {{title}}
    </div>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: 'hello vue compoent!'
      }
    },
    props: {
      dragable: {
        default: false,
        type: Boolean
      },
      title: {
        type: String,
        default: ''
      },
      pos: {
        type: String
      },
      clickCB: {
        type: Function,
        default: () => {
          return {}
        }
      },
      labelWidth: {
      }
    },
    methods: {
      clickTest() {
        this.clickCB()
      }
    }
  }
</script>

<style ref="stylesheet/less" lang="less">
  .msgWrap{
    padding: 20px 15px;
    text-align: left;
    background-color: #0c4371;
    border-radius: 8px;
    .img-warper{
      display: flex;
      .des-img{
        width: 100px;
        height: 100px;
        overflow: hidden;
        margin: 0 10px 10px 0;
        display: flex;
        justify-content: center;
        border: 1px solid #0578d2;
        img{
          //width: 100%;
          height: 100%;
        }
      }
    }
    &-title{
      font-size: 18px;
      color: #fff;
      margin-bottom: 10px;
    }
    &-close{
      position: absolute;
      color: #fff;
      right: 15px;
      top: 15px;
      font-size: 22px;
      cursor: pointer;
      &-img{
        width: 20px;
        height: 20px;
        img{
          width: 100%;
        }
      }
    }
  }
</style>
